<!DOCTYPE html>
<html lang="en">
<head>
    [#include "/customer/include/static.htm"]
    <link href="${path}/resources/css/member/main.css" rel="stylesheet" type="text/css" />
    <link href="${path}/resources/css/member/forgot.css" rel="stylesheet" type="text/css" />
    <link href="${path}/resources/plug/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <script src="${path}/resources/plug/layui/layui.js" type="text/javascript"></script>
</head>

<body>
<!--头部-->
[#include "/customer/include/header.ftl"]
<div class="g-bgwrap">
    <div class="g-subnav-tit">
        <h1><b>你所在的位置：</b><span><a href="/index">首页</a></span><i>&gt;</i><a href="javascript:void(0);">找回密码</a></h1>
    </div>
    <div class="forgot-cont">
        <div class="forgot-tit"><b>找回密码</b></div>
        <div class="forgot-index">
            <div class="forgot-mobile-tit">系统将发送一条短信到<b>${mobile?substring(0,3)+"*****"+mobile?substring(8)}</b><br>请输入短信的验证码</div>
            <div class="forgot-mobile">
                <form class="layui-form">
                    <input type="hidden" name="token" value="${token}" />
                    <ul>
                        <li class="li-inp-lay li-w320">
                            <strong class="i-yzm"></strong>
                            <input type="text" name="captcha" class="inp-txt1 inp-yzm" required lay-verify="required" placeholder="请输入验证码"  >
                        </li>
                        <li class="li-inp-lay li-w130">
                            <img src="${path}/common/random" id="code_img" width="100" height="35"
                                 onclick="this.src = '${path}/common/random?' + Math.random();" title="点击刷新验证码"
                                 style="top: 18px;margin-left:15px;" />
                        </li>

                        <li class="li-inp-lay li-w320">
                            <strong class="i-yzm"></strong>
                            <input type="text" name="code"   required lay-verify="required" class="inp-txt1 inp-yzm" placeholder="输入短信验证码" id="phoneCode">
                        </li>
                        <li>
                            <input type="button" id="time_btn" value="点击获取" class="time_btn1">
                        </li>
                    </ul>
                    <div class="forgot-error" style="display:none;" id="error"></div>
                    <button class="forgot-btn" id="btSubmit" lay-submit lay-filter="MainForm">下一步</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use(['form','layer'], function(){
        var form = layui.form(), $=layui.jquery, layer=layui.layer;
        var wait=59;
        function time() {
            $this = $("#time_btn");
            if (wait == 0) {
                $this.removeAttr("disabled");
                $this.removeClass("time_btn2").addClass('time_btn1');
                $this.val("免费获取验证码");
                wait = 60;
            }else {
                $this.attr("disabled", true);
                $this.removeClass("time_btn1").addClass('time_btn2');
                $this.val("重新发送(" + wait + ")");
                wait--;
                setTimeout(function(){time()},1000)
            }
        }
        $("#time_btn").click(function(){
            var captcha = $.trim($("input[name=captcha]").val());
            if(captcha == ''){
                layer.msg("图形验证码不能为空");
                return false;
            }
            var index = layer.load();
            ajax({
                url : "/sms/forget",
                type : "post",
                data:{"token":"${token}","captcha":captcha},
                datatype : "json",
                beforeSend:function(){
                    time();
                },
                success : function(result) {
                    layer.close(index);
                    if(result.type == "success"){
                       layer.msg("验证码已发送，请及时查收短信",{icon:1});
                    }else{
                        layer.msg(result.content,{icon:2});
                    }
                },
                complete:function(){
                    layer.close(index);
                }
            });
        });

        form.on('submit(MainForm)', function(data){
            var index = layer.load();
            ajax({
                url: "${path}/forget2",
                type: "POST",
                dataType: "json",
                cache: false,
                data: data.field,
                success: function(result) {
                    layer.close(index);
                    if(result && result.type && result.type == "success"){
                        location.href= "${path}/forget3?token="+result.content;
                    }else{
                        layer.msg(result.content);
                        $("#code_img").attr("src", "${path}/common/random?t="+new Date().getTime());
                    }
                },
                complete:function(){
                    layer.close(index);
                }
            });
            return false;
        });
    });
</script>
[#include "/customer/include/footer.ftl"]
</body>
</html>